<template>
    <div class="zlcBuildingPopup" :data-remark="true" @click="closeModel" v-show="visible">
        <div class="main">
            <div class="header">
                <div class="title" v-gradientTitle>
                    {{ nameText || "鹰潭基地" }}
                </div>
                <div class="closeIcon" :data-remark="true" @click="closeModel">
                    x
                </div>
            </div>
            <div class="tabs">
                <div v-for="(item, index) in units" :key="index" :class="['tab', checked == index ? 'on': 'off'] " @click="change(index, item)">
                    {{ item.unitNo }}
<!--                    .unitNo-->
                </div>
            </div>
            <div class="data" v-if="unitData.length">
                <div class="data_header">
                    <div class="roomNumber item">
                        房号
                    </div>
                    <div class="area item">
                        面积
                    </div>
                    <div class="usage item">
                        房号使用情况
                    </div>
                    <div class="useTo item">
                        用途
                    </div>
                    <div class="reside item">
                        是否本单位职工或家属居住
                    </div>
                    <div class="householdName item">
                        户主姓名
                    </div>
                    <div class="people item">
                        居住人数/办公人数
                    </div>
                </div>
                <div class="list">
                    <div v-for="(item, index) in unitData" :key="index" class="list_item">
                        <div class="roomNumber item">
                            {{ item.houseNo }}
                        </div>
                        <div class="area item">
                            {{ item.area }}
                        </div>
                        <div class="usage item">
                            {{ item.houseStatus_dictText }}
                        </div>
                        <div class="useTo item">
                            {{ item.houseUsage_dictText }}
                        </div>
                        <div class="reside item">
                            {{ item.isEmployessOrFamily_dictText }}
                        </div>
                        <div class="householdName item">
                            {{ item.householdName }}
                        </div>
                        <div class="people item">
                            {{ item.numbersOfPeople }}
                        </div>
                    </div>

                </div>

            </div>
            <div class="noData" v-else>
                暂无数据
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, ref, nextTick} from "vue";
import { buildingUnit, unithouse } from "/src/api/api.js"
export default{
    name: 'zlcBuildingPopup',
    props:{
        datas:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    setup(props, ctx){

        let buildingId = ref('')

        let baseId =  window.baseId
        let visible = ref(false)

        let units = ref([])

        let unitData = ref([])

        let checked = ref(0)

        let nameText = ref('')

        let showModel = (id, name) => {
            buildingId.value = id
            nameText.value = name
            checked.value = 0
            buildingUnit({baseId, buildingId: id }).then(res => {

                units.value = res.result.records

                let unitNo = units.value.length ? units.value[0].id : ''


                queryUnitHouse(unitNo)

            })
            visible.value = true
        }

        let queryUnitHouse = (unitNo) => {
            unithouse({baseId, buildingId:buildingId.value, unitId:unitNo }).then(res => {
                nextTick(() => {
                    unitData.value = res.result.records
                })
            })
        }

        let closeModel = ($event) => {
            if($event.target.dataset.remark){
                visible.value = false
            }
        }

        let change = (index, item) => {
            checked.value = index
            queryUnitHouse(item.id)
        }

        return {
            buildingId,
            visible,
            units,
            unitData,
            checked,
            showModel,
            closeModel,
            queryUnitHouse,
            nameText,
            change
        }
    }
}
</script>

<style scoped lang="less">
.zlcBuildingPopup{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #fff;



    .main{
        width: 50%;
        height: 50%;
        background: rgba(25, 25, 40, 0.7);
        box-shadow: 0px 0px 20px rgba(145, 144, 144, 0.5);
        .header{
            height: 70px;
            text-align: center;
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            border-bottom: 1px solid #fff;
            font-size: 30px;

            .closeIcon{
                position: absolute;
                right: 10px;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid #fff;
                color: #fff !important;
                text-align: center;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-evenly;
                cursor: pointer;
                &:hover{
                    background: rgba(255, 0, 0, 0.5)
                }
            }
        }

        .tabs{
            width: auto !important;
            height: 90px;
            line-height: 90px;
            overflow-x: scroll !important;
            overflow-y: hidden;
            white-space: nowrap;
            padding: 0 20px;
            box-sizing: border-box;

            /* 滚动条优化 start */
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            /* 无内容时的滚动条样式 */
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.1);
            }

            /* 有内容时的滚动条样式 */
            &::-webkit-scrollbar-thumb {
                background: rgba(0, 147, 161, 1);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: rgba(0, 147, 161, .8);
            }

            &::-webkit-scrollbar-corner {
                background: rgba(0, 0, 0, 0.1);
            }

            /* 滚动条优化 end */

            .tab{
                width: fit-content;
                height: 40px;
                line-height: 40px;
                display: inline-block;
                margin-right: 100px;
                text-align: center;
                -webkit-clip-path: polygon(0 18%, 0 100%, 86% 100%, 100% 75%, 100% 0, 22% 0);
                clip-path: polygon(0 18%, 0 100%, 86% 100%, 100% 75%, 100% 0, 22% 0);
                box-shadow: inset 0 0 10px rgb(50, 164, 235);
                cursor: pointer;
                box-sizing: border-box;
                padding: 0 20px;
                box-sizing: border-box;
                &.on{
                    box-shadow: inset 0 0 20px rgb(39, 161, 248);
                }
            }


        }
        .data{
            height: calc(100% - 160px);
            .childrenStyle{
                .item{
                    display: inline-block;
                }
                .roomNumber, .area, .useTo{
                    width: 10%;
                }
                .householdName{
                    width: 10%;
                }
                .usage{
                    width: 18%;
                }
                .reside{
                    width: 22%;
                }
                .people{
                    width: 20%;
                }
            }
            .data_header{
                width: 100%;
                height: 50px;
                line-height: 50px;
                padding: 0 10px;
                box-sizing: border-box;
                text-align: center;
                background: rgba(102, 107, 133, 0.5);
                .childrenStyle();
            }
            .list{
                width: 100%;
                height: calc(100% - 50px);
                padding: 0 10px;
                box-sizing: border-box;
                overflow-y: auto;
                /* 滚动条优化 start */
                &::-webkit-scrollbar {
                    width: 6px;
                    height: 6px;
                }

                /* 无内容时的滚动条样式 */
                &::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 4px;
                    background: rgba(0, 0, 0, 0.1);
                }

                /* 有内容时的滚动条样式 */
                &::-webkit-scrollbar-thumb {
                    background: rgba(0, 147, 161, 1);
                    border-radius: 4px;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background: rgba(0, 147, 161, .8);
                }

                &::-webkit-scrollbar-corner {
                    background: rgba(0, 0, 0, 0.1);
                }

                /* 滚动条优化 end */

                .list_item{
                    width: 100%;
                    height: 40px;
                    line-hieght: 40px;
                    text-align: center;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    .childrenStyle();
                    border-bottom: 1px solid #5b5a5a;
                }
            }
        }
        .noData{
            text-align: center;
            font-size: 24px;

        }
    }
}
</style>
